<template>
  <div class="screen page-content">
    <screen-header :title="banner.name"></screen-header>
    <div class="body">
      <el-row :gutter="20">
        <el-col :span="6" class="ibox-group">
          <div class="ibox box1-1 bgv">
            <div class="ibox-header">
              <span class="ibox-title">今日维修项目工单量监控</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="maintain_chart1_1"></div>
            </div>
          </div>
          <div class="ibox  box1-2">
            <div class="ibox-header">
              <span class="ibox-title">本周报修类别<small style="font-size: 0.68vw;">TOP10</small></span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="maintain_chart1_2"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="12" class="ibox-group">
          <div class="box2-1">
            <div class="horizontal-overview4">
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['yearCompleteTotalTaskCount']" from="0"
                    :to="taskData['yearCompleteTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['yearTotalTaskCount']" from="0"
                    :to="taskData['yearTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本年总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['monthCompleteTotalTaskCount']" from="0"
                    :to="taskData['monthCompleteTotalTaskCount']" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['monthTotalTaskCount']" from="0"
                    :to="taskData['monthTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本月总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['todayCompleteTotalTaskCount']" from="0"
                    :to="taskData['todayCompleteTotalTaskCount']" :duration="1000"
                    easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                  <span style="margin: 0 -5px;">/</span>
                  <animate-number v-if="taskData && taskData['todayTotalTaskCount']" from="0"
                    :to="taskData['todayTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>今日总任务及完成量</p>
              </div>
              <div class="item">
                <h4 class="num">
                  <animate-number v-if="taskData && taskData['monthTotalTaskCount']" from="0"
                    :to="taskData['monthTotalTaskCount']" :duration="1000" easing="easeOutQuad"></animate-number>
                  <span v-else>0</span>
                </h4>
                <p>本月服务总次数</p>
              </div>
              <div class="fx-box fx-column">
                <div class="fx-1 item-small">
                  <h4 class="num">
                    <animate-number v-if="taskData && taskData.todaySatisfiedRate" from="0"
                      :to="taskData.todaySatisfiedRate" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>100</span>
                    <span style="font-size: 0.8vw;margin-left: -0.5vw;">%</span>
                  </h4>
                  <p>今日客户满意度</p>
                </div>
                <div class="fx-1 item-small">
                  <h4 class="num">
                    <animate-number v-if="taskData && taskData.todayServerCount" from="0"
                      :to="taskData.todayServerCount" :duration="1000" easing="easeOutQuad"></animate-number>
                    <span v-else>0</span>
                  </h4>
                  <p>今日客户服务件次</p>
                </div>
              </div>
            </div>
          </div>
          <div class="ibox box2-2 bgh">
            <div class="ibox-header">
              <span class="ibox-title">当前任务</span>
            </div>
            <div class="ibox-body">
              <div class="statistics-table">
                <table>
                  <tr>
                    <th>名称</th>
                    <th>起始地</th>
                    <th>目的地</th>
                    <th>任务类型</th>
                    <th>发布时间</th>
                    <th>状态</th>
                  </tr>
                  <tr v-for="(item, index) in taskList" :key="index">
                    <td>{{ item.title || "--" }}</td>
                    <td>{{ item.sdepartName || "--" }}</td>
                    <td>{{ item.edepartName || "--" }}</td>
                    <td>{{ item.typeName || "--" }}</td>
                    <td>{{ item.addtime | date("M/d HH:mm") }}</td>
                    <td><span>{{ item.status }}</span></td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <div class="ibox box2-3 bgh">
            <div class="ibox-header">
              <span class="ibox-title">本月维修任务监测</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="maintain_chart2_3"></div>
            </div>
          </div>
        </el-col>
        <el-col :span="6" class="ibox-group">
          <div class="ibox box3-1">
            <div class="ibox-header">
              <span class="ibox-title">本周平均完工时间人员</span>
            </div>
            <div class="ibox-body">
              <div class="chart" id="maintain_chart3_1"></div>
            </div>
          </div>
          <div class="ibox box3-2">
            <div class="ibox-header">
              <span class="ibox-title">本月科室维修量监控<small style="font-size: 0.72vw;opacity: 0.9;">(TOP10)</small></span>
            </div>
            <div class="ibox-body">
              <div class="chart fx-1" id="maintain_chart3_2"></div>
            </div>
          </div>
          <div class="ibox box3-3">
            <div class="ibox-header">
              <span class="ibox-title">本月完成维修工单量<small style="font-size: 0.72vw;opacity: 0.9;">(TOP10)</small></span>
            </div>
            <div class="ibox-body">
              <div class="statistics-table">
                <table>
                  <tr>
                    <th>排名</th>
                    <th>姓名</th>
                    <th>平均完成时间</th>
                    <th>工单量</th>
                  </tr>
                  <tr v-for="(item, index) in staffRepairTask" :key="index">
                    <td>
                      <span class="rank-icon" :class="['rank' + (index + 1)]" v-if="index < 3"></span>
                      <span v-else>{{ index + 1 }}</span>
                    </td>
                    <td>{{ item.name || "--" }}</td>
                    <td>{{ (item.timeDifference) | number(0) }} 分钟</td>
                    <td>{{ item.completeRepairTaskCount }}</td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import charts from "@/utils/charts";
export default {
  props: {
    banner: {
      type: Object,
      default: () => { return {} },
    },
    current: {
      type: Object,
      default: () => { return {} },
    },
  },
  components: {},
  data() {
    return {
      timer: null,
      taskData: {},
      taskList: [],
      staffRepairTask: [],
    };
  },
  watch: {
    current() {
      if (this.current.id == this.banner.id) {
        setTimeout(this.initData, 200);
        this.timer = setInterval(this.initData, 10000);
      } else {
        clearInterval(this.timer);
      }
    }
  },
  mounted() {
    // this.initData();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    getTaskCount() {
      this.taskData = {};
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_config" }).then((res) => {
        const data = res.values;
        if (data) {
          this.taskData = JSON.parse(data);
        } else {
          this.taskData = {};
        }
      });
    },
    getTaskList() {
      this.taskList = [];
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_task" }).then((res) => {
        const data = res.values;
        if (data) {
          this.taskList = JSON.parse(data);
        } else {
          this.taskList = [];
        }
        this.taskList.map((item, index) => {
          item.addtime = new Date().getTime() - ((index + 3) * (Math.floor(Math.random() * 2) + 1) * 1000 * 60);
        })
      });
    },
    getRepairTaskCurDay() {
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_todayOrder" }).then((res) => {
        let data = res.values;
        if (data) {
          data = JSON.parse(data);
        } else {
          data = {};
        }
        let chartAxis = [];
        let seriesDatas = [{
          type: "bar",
          barWidth: this.func.chartSize(12),
          data: [],
          itemStyle: {
            borderRadius: [0, 100, 100, 0],
            color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: '#4E6AE9',
              },
              {
                offset: 1,
                color: '#02DDFE',
              }
            ]),
          },
          label: {
            show: true,
            position: "insideRight",
            offset: [-5, 0],
            color: "#fff",
            formatter: (params) => {
              return `${params.value || ''}`
            },
          },
        }];
        data.map((item, index) => {
          chartAxis.push(item.className);
          seriesDatas[0].data.push(item.repairTaskCount);
        })
        charts.hBlockChart("maintain_chart1_1", chartAxis, seriesDatas);
      });
    },
    getRepairTaskCurWeek() {
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_typeTop" }).then((res) => {
        let data = res.values;
        if (data) {
          data = JSON.parse(data);
        } else {
          data = [];
        }
        let series = [{
          z: 10,
          name: '',
          type: 'pie',
          radius: ['30%', '75%'],
          center: ['60%', '50%'],
          roseType: 'area',
          label: {
            position: "outside",
            color: "#5BBFFE",
            fontWeight: 600,
            formatter: (params) => {
              return `{val|${params.value}}`
            },
            rich: {
              val: {
                fontSize: this.func.chartSize(12),
                lineHeight: 14,
                color: '#DDF2FF'
              }
            }
          },
          labelLine: {
            // show: false,
            lineStyle: {
              width: 0.5,
              type: "dashed",
            }
          },
          tooltip: {
            show: false,
          },
          data: []
        }, {
          name: '',
          type: 'pie',
          radius: ['73%', '75%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        },
        {
          name: '',
          type: 'pie',
          radius: ['28%', '30%'],
          center: ['60%', '50%'],
          emphasis: {
            disabled: true,
          },
          tooltip: {
            show: false,
          },
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            { value: 1, name: '', itemStyle: { color: "rgba(0,78,230,0.2)" } },
          ]
        }]
        let colors = ["#FA5D58", "#FDD214", "#9B73F0", "#149BED", "#48D0E0", "#3BA272", "#9A60B4", "#EA7CCC", "#91CC75", "#FC8452"];
        data.map((item, index) => {
          series[0].data.push({
            name: item.className,
            value: item.repairTaskCount,
            itemStyle: {
              color: {
                colorStops: [{
                  offset: 0,
                  color: colors[index],
                },
                {
                  offset: 1,
                  color: this.func.hexToRgba(colors[index], 0.8),
                },]
              }
            }
          })
        })
        charts.pieChart("maintain_chart1_2", series);
      });
    },
    getRepairTaskCurMonth() {
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_monthData" }).then((res) => {
        let data = res.values;
        if (data) {
          data = JSON.parse(data);
        } else {
          data = [];
        }
        data = data.splice(0, this.func.getDaysInMonth(new Date().getFullYear(), new Date().getMonth() + 1));
        let chartAxis = [], seriesDatas = [{
          type: "line",
          name: "总量",
          symbol: "none",
          color: "#FDD214",
          lineStyle: {
            width: this.func.chartSize(1.5),
            color: "#FDD214",
          },
          areaStyle: {
            opacity: 0.2,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#FDD214",
              },
              {
                offset: 1,
                color: 'rgba(255, 255, 255,0)',
              }
            ])
          },
          data: data.map(item => {
            // return item.repairTaskCount || 0
            if (Number(item.date) <= new Date().getDate()) {
              return item.repairTaskCount || 0
            } else {
              return null
            }
          }),
        },
        {
          type: "bar",
          name: "完成量",
          barWidth: this.func.chartSize(12),
          data: [],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#02DDFE',
              },
              {
                offset: 1,
                color: '#4E6AE9',
              }
            ]),
          },
          data: data.map(item => {
            // return item.completeRepairTaskCount || 0
            if (Number(item.date) <= new Date().getDate()) {
              return item.completeRepairTaskCount || 0
            } else {
              return null
            }
          }),
        }];
        data.map((item, index) => {

          chartAxis.push(item.date)
        })
        charts.lineChart("maintain_chart2_3", chartAxis, seriesDatas);
      });
    },
    getDeptRepairTaskCurMonth() {
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_deptMonitor" }).then((res) => {
        let data = res.values;
        if (data) {
          data = JSON.parse(data);
        } else {
          data = [];
        }
        data.map(item => {
          item.name = item.deptName;
          item.value = item.repairTaskCount;
        })
        charts.hdBlockChart("maintain_chart3_2", data);
      });
    },
    getStaffRepairTaskCurWeek() {
      this.https("get", "/api/Values/ReadData", { "classKey": "repair_staffTimeWeek" }).then((res) => {
        let data = res.values;
        if (data) {
          data = JSON.parse(data);
        } else {
          data = [];
        }
        let chartAxis = [], seriesDatas = [{
          type: "bar",
          barWidth: this.func.chartSize(12),
          data: [],
          itemStyle: {
            borderRadius: 100,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#02DDFE',
              },
              {
                offset: 1,
                color: '#4E6AE9',
              }
            ]),
          }
        }];
        data.map((item, index) => {
          chartAxis.push(item.name || index + 1);
          seriesDatas[0].data.push(parseInt(item.timeDifference));
        })
        charts.blockChart("maintain_chart3_1", chartAxis, seriesDatas);
      });
    },
    getStaffRepairTaskCurMonth() {
      this.staffRepairTask = [];
      this.https("get", "/api/Values/ReadData", { "classKey": "repai_staffRepairTaskMonth" }).then((res) => {
        let data = res.values;
        if (data) {
          this.staffRepairTask = JSON.parse(data);
        } else {
          this.staffRepairTask = [];
        }
      });
    },
    initData() {
      this.getTaskCount();
      this.getTaskList();
      this.getRepairTaskCurDay();
      this.getRepairTaskCurWeek();
      this.getRepairTaskCurMonth();
      this.getDeptRepairTaskCurMonth();
      this.getStaffRepairTaskCurWeek();
      this.getStaffRepairTaskCurMonth();
    },
  },
};
</script>
<style lang="scss" scoped>
.page-content {
  position: relative;

  .box1-1 {
    height: 54.5vh;
  }

  .box1-2 {
    height: 33vh;
  }

  .box2-1 {
    height: 10vh;
    margin-bottom: 2vh;
  }

  .box2-2 {
    height: 42.5vh;
  }

  .box2-3 {
    height: 33vh;
  }

  .box3-1 {
    height: 28.5vh;
  }

  .box3-2 {
    height: 28.5vh;
  }

  .box3-3 {
    height: 28.5vh;
  }
}
</style>